<template>
  <div class="user-order" v-if="userInfo.userLevel!=0">
    <h3 class="order__title">
      <p class="order__title__title">今日详情</p>
    </h3>
    <div class="order__bd">
      <div v-for="(item, idx) in orderList" :class="{'two':idx>1}" :key="idx" class="order__bd__item" @click="to(item.type)">
        <!--        <span class="number">{{ item.number }}</span>-->
        <span class="name">{{ item.name }}</span>
        <span class="number"  style="color: #ef3939;">{{ item.count || 0 }}</span>

      </div>
    </div>
  </div>
</template>

<script>
import { getTodayMoney, getData } from '@/api/user'
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      orderList: [
        {
          number: 12323.4,
          name: '昨日卖单',
          count: '',
          type: 1
        },
        {
          number: 24,
          name: '今日买单',
          count: '',
          type: 2
        },
        {
          number: 56453.37,
          name: '今日差额',
          count: '',
          type: 3
        },
        {
          number: 56453.37,
          name: '团队总业绩',
          count: '0',
          type: 4
        },
      ]
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      getData().then(res => {
        this.orderList[0].count = res.map.sellOutMoney
        this.orderList[1].count = res.map.buymoney
        this.orderList[2].count = res.map.income
        this.orderList[3].count = res.map.fansOrderPriceNum || 0
      })
      // getTodayMoney().then((res) => {
      //   this.orderList[0].count = res.map.sellOutMoney
      //   this.orderList[1].count = res.map.buyMoney
      //   this.orderList[2].count = res.map.income
      // })
    },
    to(type) {
      let url = ""
      if (type === 3) return
      if(type!== 4){
        let uritype=0
        if (type === 1) {
          uritype = 2
        } else {
          uritype = 1
        }
        url = '/yesterday/' + type + '?type=' + uritype
      }else{
        url = "/fansOrder"
      }
      console.log(url )
      this.$router.push(url)
    }
  }
}
</script>

  <style>
  :root {
    --user-order-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.09);
  }
  </style>

  <style lang="scss" scoped>
  @import "@/styles/variables.scss";

  .two{
    margin-top: 50px !important;
  }
  .user-order {
    width: 702px;
    // height: 268px;
    margin: 0 auto;
    padding-bottom: 50px;
    box-shadow: var(
      --user-order-shadow
    ); // 这里使用 css 函数，是为了避免旧版本 vue-cli 依赖的 css 压缩工具（mini-css-extract-plugin）导致的 bug
    border-radius: 24px;
    margin-top: 42px;
    .order__title {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 34px 24px 34px 34px;
      .order__title__title {
        font-size: 36px;
        font-weight: 500;
        color: $black;
      }
      .order__title__navigate {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 6px;
        span {
          font-size: 26px;
          font-family: PingFangSC;
          font-weight: 400;
          color: $gray;
          margin-right: 10px;
        }
      }
    }
    .order__bd {
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 0 46px;
      .order__bd__item {
        width: 45%;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 14px;
        .name {
          font-size: 26px;
          color: $gray;
          // margin-top: 16px;
        }
        .number{
          margin-top: 25px;
        }
      }
    }
  }
  </style>
